<script setup>
import { ref } from "vue";
const data1 = ref({
    label: 'Argentina',
    children: [
        {
            label: 'Argentina',
            children: [
                {
                    label: 'Argentina'
                },
                {
                    label: 'Croatia'
                }
            ]
        },
        {
            label: 'France',
            children: [
                {
                    label: 'France'
                },
                {
                    label: 'Morocco'
                }
            ]
        }
    ]
});
const data2 = ref({
    key: '0',
    type: 'country',
    label: 'Argentina',
    data: 'ar',
    children: [
        {
            key: '0_0',
            type: 'country',
            label: 'Argentina',
            data: 'ar',
            children: [
                {
                    key: '0_0_0',
                    type: 'country',
                    label: 'Argentina',
                    data: 'ar'
                },
                {
                    key: '0_0_1',
                    type: 'country',
                    label: 'Croatia',
                    data: 'hr'
                }
            ]
        },
        {
            key: '0_1',
            type: 'country',
            label: 'France',
            data: 'fr',
            children: [
                {
                    key: '0_1_0',
                    type: 'country',
                    label: 'France',
                    data: 'fr'
                },
                {
                    key: '0_1_1',
                    type: 'country',
                    label: 'Morocco',
                    data: 'ma'
                }
            ]
        }
    ]
});
const data3 = ref({
    key: '0',
    type: 'person',
    data: {
        image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
        name: 'Amy Elsner',
        title: 'CEO'
    },
    children: [
        {
            key: '0_0',
            type: 'person',
            data: {
                image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
                name: 'Anna Fali',
                title: 'CMO'
            },
            children: [
                {
                    key: '0_0_0',
                    label: 'Sales'
                },
                {
                    key: '0_0_"1',
                    label: 'Marketing'
                }
            ]
        },
        {
            key: '0_1',
            type: 'person',
            data: {
                image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
                name: 'Stephen Shaw',
                title: 'CTO'
            },
            children: [
                {
                    key: '0_1_0',
                    label: 'Development'
                },
                {
                    key: '0_1_1',
                    label: 'UI/UX Design'
                }
            ]
        }
    ]
});
const selection = ref({});
const data = ref({
    key: '0',
    type: 'person',
    styleClass: 'bg-indigo-100 border-round-xl',
    data: {
        image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
        name: 'Amy Elsner',
        title: 'CEO'
    },
    children: [
        {
            key: '0_0',
            type: 'person',
            styleClass: 'bg-purple-100 border-round-xl',
            data: {
                image: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png',
                name: 'Anna Fali',
                title: 'CMO'
            },
            children: [
                {
                    label: 'Sales',
                    styleClass: 'bg-purple-100 border-round-xl'
                },
                {
                    label: 'Marketing',
                    styleClass: 'bg-purple-100 border-round-xl'
                }
            ]
        },
        {
            key: '0_1',
            type: 'person',
            styleClass: 'bg-teal-100 border-round-xl',
            data: {
                image: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png',
                name: 'Stephen Shaw',
                title: 'CTO'
            },
            children: [
                {
                    label: 'Development',
                    styleClass: 'bg-teal-100 border-round-xl'
                },
                {
                    label: 'UI/UX Design',
                    styleClass: 'bg-teal-100 border-round-xl'
                }
            ]
        }
    ]
});
</script>
<template>
    <div class="grid">
        <div class="col-12">
            <div class="card overflow-x-auto">
                <h5>Basic</h5>
                <OrganizationChart :value="data1">
                    <template #default="slotProps">
                        <span>{{ slotProps.node.label }}</span>
                    </template>
                </OrganizationChart>
            </div>
            <div class="card overflow-x-auto">
                <h5>Template</h5>
                <OrganizationChart :value="data2" collapsible>
                    <template #country="slotProps">
                        <div class="flex flex-column align-items-center">
                            <img :alt="slotProps.node.label"
                                src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                :class="`w-2rem flag flag-${slotProps.node.data}`" />
                            <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
                        </div>
                    </template>
                    <template #default="slotProps">
                        <span>{{ slotProps.node.data.label }}</span>
                    </template>
                </OrganizationChart>
            </div>
            <div class="card overflow-x-auto">
                <h5>Selection</h5>
                <OrganizationChart v-model:selectionKeys="selection" :value="data3" collapsible
                    selectionMode="multiple">
                    <template #person="slotProps">
                        <div class="flex flex-column">
                            <div class="flex flex-column align-items-center">
                                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image"
                                    class="mb-3 w-3rem h-3rem" />
                                <span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
                                <span>{{ slotProps.node.data.title }}</span>
                            </div>
                        </div>
                    </template>
                    <template #default="slotProps">
                        <span>{{ slotProps.node.label }}</span>
                    </template>
                </OrganizationChart>
            </div>
            <div class="card overflow-x-auto">
                <h5>Colored</h5>
                <OrganizationChart :value="data" collapsible>
                    <template #person="slotProps">
                        <div class="flex flex-column">
                            <div class="flex flex-column align-items-center">
                                <img :alt="slotProps.node.data.name" :src="slotProps.node.data.image"
                                    class="mb-3 w-3rem h-3rem" />
                                <span class="font-bold mb-2 gray-950">{{ slotProps.node.data.name }}</span>
                                <span>{{ slotProps.node.data.title }}</span>
                            </div>
                        </div>
                    </template>
                    <template #default="slotProps">
                        <span>{{ slotProps.node.label }}</span>
                    </template>
                </OrganizationChart>
            </div>
        </div>
    </div>
</template>
